<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定与解绑</title>
</head>

<body>
    <button id="btn01">传统事件注册</button>
    <button id="btn02">方法监听进行事件注册</button>
    <span id="content" style="display: none;"></span>
</body>

</html>
<script>
    let btn01 = window.document.querySelector('#btn01');
    let btn02 = window.document.querySelector('#btn02');
    btn01.onclick = function(param) {
        window.alert(btn01.innerText);
    };
    btn01.onclick = function(param) {
        window.alert(btn02.innerText);
    };
    // attachEvent(IE)
    btn02.addEventListener('click', function(param) {
        window.alert(btn02.innerText);
    });
    btn02.addEventListener('click', function(param) {
        window.alert(btn01.innerText);
    });
    btn02.addEventListener('click', function(param) {
        lihaozhe();
        btn02.removeEventListener('click', liuxiaolan);
    });
    btn02.addEventListener('click', liuxiaolan);

    function lihaozhe(params) {
        let content = window.document.querySelector('#content');
        content.innerText = btn02.innerText;
        content.style.display = 'block';
    }

    function liuxiaolan(params) {
        let content = window.document.querySelector('#content');
        content.append(btn01.innerText);
        content.style.display = 'block';
    }
</script>